<template>
  <div class="wrap">
    <!-- tab栏切换 -->
    <!-- <StaticTab/> -->
    <el-button type="primary" icon="el-icon-upload" @click='exportFun' class='exportBtn'>导出</el-button>
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label">收支明细 </span>
        <div class='shadow'>
          <!-- search -->
          <StaticSearch @searchStaticData="searchStaticData" @changeStaticdate="changeStaticdate" @changeStaticType="changeStaticType" />
          <!-- 总计 -->
          <StaticInfo />
          <!-- 表格 -->
          <StaticTable :arr="arr"/>
          <!-- 分页 -->
          <StaticPage :page='page' :pageSize ="pageSize" :total="total" @handleCurrentChange="handleCurrentChange"/>
        </div>
      
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">收费员收费统计 </span>
        收费员收费统计
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">科室收费统计 </span>
        科室收费统计
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">医生业绩统计 </span>
        医生业绩统计
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">储值明细 </span>
        储值明细
      </el-tab-pane>
    </el-tabs>
    
    <!-- 查看详情界面 -->
    <StaticDialog @resetdata="InitData"/>
  </div>
</template>

<script>
import StaticPage from "./components/StaticPage.vue";
import StaticTable from "./components/StaticTable.vue";
import StaticSearch from "./components/StaticSearch.vue";
import StaticInfo from "./components/StaticInfo.vue";
import StaticDialog from './components/StaticDialog.vue'

//接口
import {GetStaticData} from '../../api/StaticApi.js';

// 导出工具类
import {export_json_to_excel} from '../../utils/ExcelUtils.js'
export default {
  data(){return {
    arr:[],
    keyword:"",
    page:1,
    pageSize:20,
    total:30,
    orderType:"",//订单类型
    fromdate:"",
    todate:"",
  }},
  mounted(){
    this.InitData();
  },
  methods:{
      changeStaticType(val){
      // console.log("订单类型：",val);
      this.orderType = val;
      this.InitData();
    },
  // 获取时间
  changeStaticdate(date){
    this.fromdate=date[0];
    this.todate=date[1];
    this.InitData();
  },
  formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => {
              return v[j]
          }))
      },
    // 导出按钮
    exportFun(){
        console.log("导出");
       //导出excel
       //自定义的头部
      const tHeader =  ['序号', '订单状态', '订单类型', '订单编号','姓名','科室','接诊医生','优惠(元)','应收(元)','实收(元)','医保(元)','会员卡(元)','现金(元)','支付宝(元)','微信(元)','银行卡(元)','收费日期','收费员']
        //自定义的字段
      const filterVal = ['id', 'state', 'type', 'orderNum', 'name', 'department','docter','discount','receive','trueRec','yb','vipcard','cash','zfb','wx','card','date','tollCollector']
      GetStaticData({keyword:this.keyword,page:1,pageSize:100000,orderType:this.orderType}).then(res=>{
        if(res.code == 200){
          const data = this.formatJson(filterVal,res.data);
            export_json_to_excel({
                header: tHeader,//excel头部列表
                data,//数据
                filename: '收支明细',//文件名称
                autoWidth: true,//自适应宽
                bookType: 'xlsx'//文件类型
            })
        }
      })
   },
    // 初始化获取数据
    InitData(){
      GetStaticData({keyword:this.keyword,page:this.page,pageSize:this.pageSize,orderType:this.orderType,
      fromDate:this.fromdate,toDate:this.todate}).then(res=>{
        // console.log("发送GetStaticData:",res);
        if(res.code == 200){
          this.arr = res.data;
          this.total = res.total;
        }
      })
    },
    // 查询数据
    searchStaticData(keyword){
      this.keyword=keyword;
      this.InitData();
    },
    // 改变页数
    handleCurrentChange(val){
      this.page = val;
      this.InitData();
    }
  },  
  components: { StaticPage, StaticTable, StaticSearch, StaticInfo ,StaticDialog},
};
</script>

<style lang='less' scoped>
  .wrap{position:relative;}
  .exportBtn{
    position: absolute;
    top:10px;right:20px;z-index:999;
    font-size:14px;
    padding:6px 10px;
    background-color: transparent;color:#6971E8;
    font-weight: bold;border:2px solid #6971E8;
  }
  /deep/.el-tabs__item{
    height:50px;line-height:50px;
  }
  /deep/.el-tabs--border-card>.el-tabs__header .el-tabs__item{
      border-radius:5px;
  }
  /deep/.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
    background-color: #666EE8;
    color:#FFFFFF;
  }
  /deep/.el-tabs{border-radius:15px;min-height: 700px;}
</style>